The <Configure> component lets you provide raw search parameters to the Algolia API without rendering anything. Any props you pass to this component are forwarded to Algolia.
Don’t make the widget itself conditional, for example, in a ternary statement. Doing so creates an infinite loop.
  import { Configure } from 'react-instantsearch';

​
Props

​
searchParameters
object
A list of search parameters to enable.

​
Hook

To create your own UI for the <Configure> component, use the useConfigure` Hook. Hooks provide APIs to access the component state and interact with InstantSearch. The useConfigure() Hook accepts parameters and returns APIs.

​
Usage

1

Create your React component

JSX
import { useConfigure } from 'react-instantsearch';

function CustomConfigure(props) {
const { refine } = useConfigure(props);

return null;
}
2

Render the widget

JSX
<CustomConfigure {...searchParameters} />

​
Hook parameters

Hooks accept parameters. You can pass them manually, or forward the props from your custom component.
​
...searchParameters
searchParameters
A list of search parameters to enable. It returns an object with a refine function that you can use to replace the provided search parameters with new ones.
JavaScript
const configureApi = useConfigure({
  hitsPerPage: 4,
  analytics: false,
  distinct: true,
});
When you provide a function to Hooks, make sure to pass a stable reference to avoid rendering endlessly (for example, with useCallback()). Objects and arrays are memoized: you don’t need to stabilize them.

​
Hook APIs

Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.
​
refine
(value: SearchParameters) => void
Replaces the provided search parameters with new ones.
JSX
const { refine } = useConfigure({
  hitsPerPage: 4,
});

return (
  <button onClick={() => refine({ hitsPerPage: 8 })}>
    Show 8 hits per page
  </button>
);

​
Hook example

import React from 'react';
import { useConfigure } from 'react-instantsearch';

function CustomConfigure(props) {
    useConfigure(props);

    return null;
}